<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>155_事件对象简介</title>
		<style>
			#box {
				width: 300px;
				height: 300px;
				border: 10px greenyellow solid;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script>
			/* 
			event 事件
				-事件对象
				-事件对象是有浏览器在事件触发时所创建的对象，
					这个对象中封装了事件相关的各种信息
				-通过事件对象可以获取到事件的详细信息
					比如:鼠标的坐标、键盘的按键..
				-浏览器在创建事件对象后，会将事件对象作为响应函数的参数传递，
					所以我们可以在事件的回调函数中定义一个形参来接收事件对象
			 */
			box.onmousemove = function() {
				console.log("鼠标移动..")
			}

			box.onmousemove = event => {
				console.log(event);
				box.textContent = event.clientX + "-" + event.clientY
			}

			box.addEventListener("mousemove", event => {
				box.textContent = event.clientX + "-" + event.clientY
			})
		</script>
	</body>
</html>